<template>
  <!-- 第一个 停电检测 -->
  <div>
    <dv-scroll-board :config="table" style="width: 100%; height: 280px" />
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, watch } from "vue";
import { useOrderStore } from "/@/store/index.ts";
const orderStore = useOrderStore();

let orderList = ref([]);
let tableData = ref([]);
watch(
  () => orderStore.order_list,
  (newVal, oldVal) => {
    orderList.value = newVal;
    if (orderList.value.length > 0) {
      tableData.value = [];
      orderList.value.forEach((item: any) => {
        tableData.value.push({
          订单编号: item.order_no,
          客户: item.customer_name,
          金额: '￥'+item.total_price,
          状态: item.status_name,
        });
      });
    }
    initTable();
  },
  {
    deep: true, // 如果需要深度监听对象内部属性的变化
  }
);

let table = ref(null);

const initTable = () => {
  // 示例数据
  table.value = {
    headerHeight: 50,
    headerBGC: "rgba(14,183,221,0.8)",
    oddRowBGC: "rgba(14,183,221,0.3)",
    evenRowBGC: "rgba(14,183,221,0.4)",
    header: ["订单编号", "客户", "金额", "状态"],
    data: tableData.value,
  };
};
</script>